import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import './index.scss'
import { placeHolderImg, projectId } from '../../../../utils/constants'
import { reportClick } from '@/utils/ping'
import { get } from 'lodash'
import { isAdpterBlur } from '@/utils/deviceInfo'
import { isMinimumAndroidVersion } from '@/utils/ENV'

class PriceModel extends PureComponent {
	componentDidMount() {
		reportClick({
			eventId: 'Mhelp_StoryDetail_MianbanExpo',
			eventParam: `${projectId}`,
		})
	}

	/**
	 * @description:  点击档位时机
	 * @param {Object} selectItem
	 */
	handleClickDw = (selectItem) => {
		// if (!selectItem.canBuy) {
		// 	return
		// }
		// 档位按钮选择事件
		if (selectItem.amount < 0 || !selectItem.amount) {
			return
		}
		const { redoundItemData, setRedoundItemData } = this.props

		const { redoundItem, selected } = redoundItemData
		if (redoundItem.redoundId === selectItem.redoundId) {
			setRedoundItemData({
				selected: !selected,
			})
		} else {
			setRedoundItemData({
				selected: true,
				redoundItem: selectItem,
				count: selectItem.limitCount === 0 && selectItem.limits !== 0 ? 0 : 1,
			})
		}
	}

	/**
	 * @description: 减少数量
	 */
	deleteNum = () => {
		const { setRedoundItemData, redoundItemData } = this.props

		const { count } = redoundItemData
		// 删除数量
		if (count <= 1) {
			return
		}
		setRedoundItemData({
			count: count - 1,
		})
	}

	/**
	 * @description: 增加数量
	 */
	addNum = () => {
		const { setRedoundItemData, redoundItemData } = this.props
		const { redoundItem, count } = redoundItemData
		// 添加数量
		if (count >= redoundItem.limitCount) {
			// 当添加的数量大于剩余数，返回
			return
		}
		setRedoundItemData({
			count: count + 1,
		})
	}

	/**
	 * @description: 关闭弹框
	 */
	toggleModal = () => {
		const { closeDialog, redoundItemData, homeData } = this.props
		const { redoundItem, count } = redoundItemData
		const supportRedoundId = redoundItem.redoundId
		const storyPageData = get(homeData, 'storyPageData', {})
		const projectStoryNewDto = get(storyPageData, 'projectStoryNewDto', {})
		const buttonStatus = get(projectStoryNewDto, 'buttonStatus', 0)
		reportClick({
			eventId: 'Mhelp_StoryDetail_MianbanClose',
			eventParam: `${projectId}_${buttonStatus}_${supportRedoundId}_${count}`,
		})
		closeDialog()
	}

	stopPropagate = (e) => {
		e.preventDefault()
		e.stopPropagation()
	}

	render() {
		const { dialogData, homeData, redoundItemData } = this.props
		const { isOpen } = dialogData
		const { storyPageData } = homeData
		const { projectRedoundListDto } = storyPageData

		const { redoundItem, count, selected } = redoundItemData
		// const dialogBgCls = 'dialog-background-blur'
		// const countBorderCls = 'count-border'

		// const closeBtnBgCls = 'closeBtn-background-blur'

		const dialogBgCls = !isAdpterBlur() ? 'dialog-background-blur' : 'dialog-background-default'
		const countBorderCls = !isAdpterBlur() ? '' : 'count-border'

		const closeBtnBgCls = !isAdpterBlur()
			? 'closeBtn-background-blur'
			: 'closeBtn-background-default'
		const countAddBtnDisableCls = count === redoundItem.limitCount ? 'addbtn-disable' : ''
		const androidVersionLessThan5 = isMinimumAndroidVersion()
		return isOpen && redoundItem.redoundId ? (
			<div className="blurBack">
				<div className="mask" onClick={this.toggleModal}></div>

				<div className="modal-container" onClick={this.toggleModal}>
					{/* 关闭按钮 */}
					<div className="toggleModel">
						<div className={closeBtnBgCls}>
							<div className={`${closeBtnBgCls}-content`}> </div>
						</div>
						<img
							className="closeButton"
							// src="https://img14.360buyimg.com/imagetools/jfs/t1/135729/2/13760/387/5f991e27E98b6866c/0e2e57fbf296aa81.png"
							src="https://img14.360buyimg.com/imagetools/jfs/t1/152176/33/5267/838/5fa91283E8960e80b/69f539ef831cf8a0.png"
							alt=""
						/>
					</div>
					<div className="scroll-wrap" onClick={this.stopPropagate}>
						<div className={dialogBgCls}>
							<div className={`${dialogBgCls}-content`}> </div>
						</div>
						<div
							className={`scroll ${
								androidVersionLessThan5 ? 'static-scroll-height' : ''
							}`}>
							<div className="PriceModel">
								<div className="PriceModelTitle">
									{/* 产品图片 */}
									<img
										className="redoundItemImg"
										src={
											redoundItem.redoundThumImage
												? redoundItem.redoundThumImage
												: placeHolderImg
										}
										alt=""
									/>
									<div className="PriceDesc">
										{/* 产品介绍，金额 */}
										<span className="redoundContent">
											{redoundItem.redoundContent}
										</span>
										<div className="PriceDescMoney">
											<span className="codeMoneyUnit">￥</span>
											<span className="codeMoney">
												{redoundItem.amount > 0 ? redoundItem.amount : 0}
											</span>
										</div>
									</div>
								</div>
								<p className="inChoosePrice">档位</p>
								<div className="PriceButtonChoose">
									{/* 档位选择 */}
									{projectRedoundListDto.map((item) => {
										let defaultStyle = 'defalutActivityChoose'

										if (!item.canBuy) {
											defaultStyle = 'defalutActivityChoose btn-disable'
										}

										const btnStyle =
											selected && item.redoundId === redoundItem.redoundId
												? `activityChoose ${defaultStyle}`
												: defaultStyle

										return (
											<div
												key={item.redoundId}
												onClick={() => this.handleClickDw(item)}
												className={btnStyle}
												style={{
													opacity: item.canBuy ? 1 : 0.6,
												}}>
												{/* <div className="itemAmount"> */}
												{item.amount > 0
													? `￥${item.amount}`
													: `价格待公布`}
												{/* </div> */}
											</div>
										)
									})}
								</div>
								{/* 剩余数量 */}
								<div className="chooseNum">
									<p className="num">
										数量
										<span className="surplusNum">
											{redoundItem.surplusCount === Infinity
												? ''
												: `(剩余数量${redoundItem.surplusCount})`}
										</span>
									</p>
								</div>
								{/* 选择数量按钮 */}
								<div className="operate-wrap">
									<div
										onClick={this.deleteNum}
										className={`${countBorderCls} deleteAndAddNum`}>
										-
									</div>
									<div className={countBorderCls}>{count}</div>
									<div
										onClick={this.addNum}
										className={`${countBorderCls} ${countAddBtnDisableCls} deleteAndAddNum`}>
										+
									</div>
								</div>
								{/* 配送时间 */}
								<div className="chooseFooter">
									<div className="Distribution">
										运费：
										{redoundItem.freight
											? `￥${redoundItem.freight}`
											: '免运费'}
									</div>
									<div className="Distribution distribution-time">
										{redoundItem.amount !== 1 &&
											`预计发货时间：众筹成功后${
												redoundItem.redoundDays
													? redoundItem.redoundDays
													: 0
											}天`}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		) : null
	}
}

function dispatchToAction(dispatch) {
	return {
		setRedoundItemData(payload) {
			dispatch({
				type: 'set:redoundItem',
				payload,
			})
		},
		closeDialog() {
			dispatch({
				type: 'open:dialog',
				payload: {
					isOpen: false,
				},
			})
		},
	}
}

export default connect(
	({ homeData, dialogData, redoundItemData }) => ({
		homeData,
		dialogData,
		redoundItemData,
	}),
	dispatchToAction
)(PriceModel)
